<template>
	<view class="bank-card-page">
		
		<view class="nav-bar">
			<up-navbar :title="t('Bank Cards')" @leftClick="goWithdraw" :autoBack="true">
			</up-navbar>
		</view>

		
		<scroll-view v-if="cards.length > 0" scroll-y="true" class="card-container">
			<view v-for="(card, index) in cards" :key="index" class="bank-card" :class="getCardColor(index)"
				@click="selectCard(index)">
				<view class="bank-info">
					<image class="bank-logo" :src="getBankLogo(card.country)"></image>
					<view class="bank-detail">
						<view class="bank-name" v-if="card.country==0">{{ card.holder_name }} </view>
						<view class="bank-name" v-if="card.country!=0">{{ card.holder_name }} -
							{{ getCountryName(card.country,card.platform) }}</view>
						<view class="card-type">{{ card.ifsc }}</view>
					</view>
				</view>
				<view class="card-number" v-if="card.country!=0">
					<text class="number">{{t('AccountNum')}}:{{ card.account_num }}</text>
				</view>
				<view class="card-number" v-if="card.country==0">
					<text class="number">{{t('Withdrawal address')}}:{{ card.ifsc}}</text>
				</view>
				<view class="card-number" v-if="card.country==5">
					<text class="number">
						Phone:{{card.acc_phone}}
					</text>
				</view>
				<view class="card-number" v-if="card.country==5">
					<text class="number">
						IDCard:{{card.id_number}}
					</text>
				</view>
				
				<view class="card-exchange-rate">
					<text class="rate-value">{{ getExchangeRate(card.country) }}</text>
					<text class="rate-label">{{ t('Exchange Rate') }}</text>

				</view>
			</view>
		</scroll-view>
		
		<view v-else class="empty-state">
			<image class="empty-icon" src="/static/icons/empty-bank.png"></image>
			<view class="empty-text">{{t('No bank cards yet')}}</view>
			<view class="empty-subtext">{{t('Please add your bank account to withdraw funds')}}</view>
		</view>
		
		<up-popup :show="paymentDetail" :round="10" mode="bottom" @close="paymentDetail=false" :closeable="true">
			<view class="detialBody">
				<view class="selector-title">{{t('Payment Channel Bank')}}<text class="required">*</text></view>
				<up-radio-group v-model="selectedChannel" @change="handleChannelChange">
					<view class="channel-options">
						<view v-for="(channel, index) in filteredAllocationList" :key="index" class="channel-item">
							<up-radio :name="channel.id" :label="channel.title" active-color="rgb(47, 122, 218)">
							</up-radio>
						</view>
					</view>
				</up-radio-group>
				<view class="btns" @click="showAddBank" style="margin-top: 3vh;">{{t('submit')}}</view>
			</view>
		</up-popup>
		
		<view class="add-card-btn" @click="addNewCard" v-if="availableCountries.length !== 0">
			<text class="add-icon">+</text>
			<text class="add-text">{{t('Add Bank')}}</text>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { useI18n } from 'vue-i18n';
	import { onMounted, reactive, ref } from 'vue'
	import { bankCardInfo, getWithdrawalChannel } from '@/api/user'
	const { t } = useI18n();
	const cards = ref([]);
	const allocationList = ref([
		{ value: 1, label: "India" },
		{ value: 2, label: 'Indonesia' },
		{ value: 3, label: 'Nigeria' },
		{ value: 4, label: 'Bangladesh' },
		{ value: 5, label: 'Pakistan Wallet' },
		
		{ value: 0, label: 'USDT(TRC20)' }
	])
	const countryRoutes = ref([
		'/pages/withdraw/addBank/ustd',
		'/pages/withdraw/addBank/index',
		'/pages/withdraw/addBank/Indonesia',
		'/pages/withdraw/addBank/Nigeria',
		'/pages/withdraw/addBank/Bangladesh',
		'/pages/withdraw/addBank/Pakistan',
		'/pages/withdraw/addBank/PakistanBank',

	]);
	const countryList = ref(null);
	
	const getExchangeRate = (countryTitle) => {
		countryTitle = getMappedValue(countryTitle);
		
		const country = countryList.value.find(item => item.id === countryTitle);
		if (country) {
			
			let content = country.content;
			let newContent = content.replace(/^2(?=:)/, '1'); 
			return newContent;
		}

		return '1:0';
	};
	const getMappedValue = (countryTitle) => {
		return countryTitle == 1 ? 39 :
			countryTitle == 2 ? 40 :
				countryTitle == 3 ? 41 :
					countryTitle == 4 ? 44 :
						countryTitle == 5 ? 43 : 45
	};
	const paymentDetail = ref(false)
	const selectedChannel = ref(null); 
	const goWithdraw = () => {
		uni.reLaunch({
			url: '/pages/withdraw/index',
		})
	}

const selectCard = (index) => {
  const { country, platform,ac_type } = cards.value[index];
  
  const channelToUrlMap = {
    1: { 
      0: { platform: 0, url: '/pages/withdraw/addBank/index' },
    },
    2: {
      3: { platform: 3, url: '/pages/withdraw/addBank/Indonesia' },
      1: { platform: 1, url: '/pages/withdraw/addBank/IndonesiaJdpay' }
    },
    3: {
      3: { platform: 3, url: '/pages/withdraw/addBank/Nigeria' },
      1: { platform: 1, url: '/pages/withdraw/addBank/NigeriaJdpay' }
    },
    4: {
      2: { platform: 2, url: '/pages/withdraw/addBank/Bangladesh' },
      1: { platform: 1, url: '/pages/withdraw/addBank/Bangladesh' }
    },
    5: {
      2: { platform: 1, url: '/pages/withdraw/addBank/Pakistan' },
      1: { platform: 1, url: '/pages/withdraw/addBank/PakistanBank' }
    },
    0: {
      100: { platform: 100, url: '/pages/withdraw/addBank/ustd' }
    }
  };
  
  const countryMap = channelToUrlMap[country];
  if (countryMap) {
   let channel;
   
   if (country === 5) {
     channel = countryMap[ac_type];
   } else {
     channel = countryMap[platform];
   }
    if (channel) {
      if (channel.platform !== null) {
        uni.setStorageSync('platform', channel.platform);
      }
      uni.navigateTo({
        url: channel.url
      });
    } else {
      console.error('Invalid ac_type for the selected country');
    }
  } else {
    console.error('Invalid country selection');
  }
};


	const filteredAllocationList = ref([]);
	const availableCountries = ref([])
	const addNewCard = () => {
		
		    
		const existingKeys = cards.value.map(c =>
		  `${c.country}_${c.platform}` 
		);

		availableCountries.value = countryList.value.filter(item => {
		  
		  let key = `${item.country}_${item.platform}`;
		  
		  return !existingKeys.includes(key);
		});
		
		if (availableCountries.value.length === 0) {
			uni.showToast({
				title: t('All country bank cards added'),
				icon: 'none'
			});
		} else {
			filteredAllocationList.value = availableCountries.value;
			paymentDetail.value = true;
		}
	};


	const getCardColor = (index) => {
		const colors = ['blue', 'red', 'green'];
		return colors[index % colors.length];
	};
	const initPage = async () => {
		
		const req = await getWithdrawalChannel();
		countryList.value = req.data;
		
		if (countryList.value && Array.isArray(countryList.value)) {
		  
		  countryList.value.forEach(item => {
		    if (item.title === 'USDT(TRC20)') {
		      item.country = 0;
		    }
		  });
		}
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		const ress = await bankCardInfo({ country: -1 })
		if (ress.code == 0) {
			cards.value = ress.data
		}
		
		
		const existingCountries = cards.value.map(card => `${card.country}_${card.platform}`); 
		availableCountries.value = allocationList.value.filter(country =>
		  !existingCountries.includes(`${country.value}_${country.platform}`) 
		);

		if (availableCountries.length != 0) { filteredAllocationList.value = availableCountries.value; }
	}

	const getBankLogo = (countryCode) => {
		const logoMap = {
			1: '/static/bank-icons/india.png',
			2: '/static/bank-icons/indonesia.png',
			3: '/static/bank-icons/nigeria.png',
			4: '/static/bank-icons/bangladesh.png',
			5: '/static/bank-icons/pakistan.png',
			0: '/static/usdt.png',
		};
		return logoMap[countryCode] || '/static/bank-icons/default.png';
	};

	const getCountryFlag = (countryId) => {
		const flagMap = {
			1: '/static/bank-icons/india.png',
			2: '/static/bank-icons/indonesia.png',
			3: '/static/bank-icons/nigeria.png',
			4: '/static/bank-icons/bangladesh.png',
			5: '/static/bank-icons/pakistan.png',
			0: '/static/bank-icons/ustd.png',
		};
		return flagMap[countryId] || '../../static/bank-icons/default.png';
	};

	const getCountryName = (countryCode, platform) => {
		const country = allocationList.value.find(item => item.value === countryCode);
		if (country.value == 2 && platform == 3) {
			return 'Indonesia'
		}
		if (country.value == 2  && platform == 1) {
			return 'Indonesia_V2'
		}
		if (country.value == 3 && platform == 3) {
			return 'Nigeria'
		}
		if (country.value == 3  && platform == 1) {
			return 'Nigeria_V2'
		}
		if (country.value == 4 && platform == 4) {
			return 'Bangladesh'
		}
		if (country.value == 4  && platform == 1) {
			return 'Bangladesh_v2'
		}
		return country ? country.label : 'Unknown';
	};
	initPage();
	const showAddBank = () => {
	  const channelToUrlMap = {
	    39: { platform: 0, url: '/pages/withdraw/addBank/index' },
	    40: { platform: 3, url: '/pages/withdraw/addBank/Indonesia' },
	    45: { platform: 1, url: '/pages/withdraw/addBank/IndonesiaJdpay' },
	    41: { platform: 3, url: '/pages/withdraw/addBank/Nigeria' },
	    46: { platform: 1, url: '/pages/withdraw/addBank/NigeriaJdpay' },
	    44: { platform: 2, url: '/pages/withdraw/addBank/Bangladesh' },
		47: { platform: 1, url: '/pages/withdraw/addBank/Bangladesh' },
	    43: { platform: 2, url: '/pages/withdraw/addBank/Pakistan' },
	    
	    48: { platform: 100, url: '/pages/withdraw/addBank/ustd' }
	  };
	  
	  const channel = channelToUrlMap[selectedChannel.value];
	  if (channel) {
	    if (channel.platform !== null) {
	      uni.setStorageSync('platform', channel.platform);
	    }
	    uni.navigateTo({
	      url: channel.url
	    });
	  }
	
	  paymentDetail.value = false;
	};

</script>

<style lang="scss" scoped>
	.bank-card-page {
		background-color: #F1F1EF;
		min-height: 100vh;
		padding: 0 0 50px 0;
		box-sizing: border-box;
		position: relative;
	}

	
	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 40px 15px 10px;
		color: #ffffff;
	}

	::v-deep .u-navbar {
		.u-navbar__content {
			background: rgba(255, 255, 255, 1) !important;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
		}
	}

	.back-icon {
		font-size: 24px;
		width: 30px;
	}

	.title {
		font-size: 18px;
		font-weight: 500;
		color: #000;
	}

	.more-icon {
		font-size: 24px;
		width: 30px;
		text-align: right;
	}

	
	.card-container {
		padding: 0 15px;
		max-height: calc(100vh - 150px);
	}

	
	.bank-card {
		border-radius: 16px;
		padding: 10px;
		margin-bottom: 15px;
		position: relative;
		overflow: hidden;
	}

	
	.card-flag {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		width: 40px;
		height: 40px;
		border-radius: 50%;
		object-fit: cover;
	}

	
	.bank-info,
	.card-number {
		width: calc(100% - 60px);
	}

	

	.green {
		background: linear-gradient(135deg, #66D99F 0%, #56C58A 100%);
		
	}

	.red {
		background: linear-gradient(135deg, #FF7B6D 0%, #FF5C4B 100%);
		
	}

	.blue {
		background: linear-gradient(135deg, #66B9FF 0%, #4A91D8 100%);
		
	}


	
	.bank-info {
		display: flex;
		align-items: center;
		margin-bottom: 25px;
	}

	.bank-logo {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		background-color: #ffffff;
		margin-right: 10px;
	}

	.bank-detail {
		color: #ffffff;
	}

	.bank-name {
		font-size: 18px;
		font-weight: 500;
		margin-bottom: 5px;
	}

	.card-type {
		font-size: 14px;
		opacity: 0.8;
	}

	
	.card-number {
		display: flex;
		color: #ffffff;
		font-size: 15px;
		letter-spacing: 2px;
	}

	
	.card-phone {
		display: flex;
		color: #ffffff;
		font-size: 15px;
		letter-spacing: 2px;
	}

	.dot {
		margin-right: 5px;
	}

	.number {
		font-weight: 500;
	}

	
	.add-card-btn {
		width: 60vw;
		border-radius: 10vw;
		text-align: center;
		background: linear-gradient(to right, rgb(104, 175, 247), rgb(47, 122, 218));
		
		font-weight: bold;
		font-size: 1rem;
		position: fixed;
		bottom: 3vh;
		padding: 0.4rem 1rem;
		cursor: pointer;
		color: #fff;
		margin-left: 70px;
	}

	.add-icon {
		font-size: 24px;
		margin-right: 10px;
	}

	.add-text {
		font-size: 16px;
	}

	
	.bank-card::after {
		content: "";
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		opacity: 0.1;
		background-size: 80%;
		background-position: right center;
		background-repeat: no-repeat;
	}

	.green::after {
		background-image: url('/static/bank-icons/psbc-bg.png');
	}

	.red::after {
		background-image: url('/static/bank-icons/cmb-bg.png');
	}

	.blue::after {
		background-image: url('/static/bank-icons/ccb-bg.png');
	}

	.detialBody {
		padding: 3vw;
		width: 94vw;
		padding-bottom: 6vh;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
	}

	.selector-title {
		font-size: 0.9rem;
		font-weight: bold;
		margin-bottom: 0.8rem;
		color: #333;

		.required {
			color: rgb(47, 122, 218);
			margin-left: 4px;
		}
	}

	.channel-options {
		display: flex;
		flex-wrap: wrap;
		gap: 0.8rem;
	}


	.channel-content {
		display: flex;
		align-items: center;
		padding: 0.5rem 0;
	}

	.channel-icon {
		width: 1.5rem;
		height: 1.5rem;
		margin-right: 0.6rem;
	}

	.channel-name {
		font-size: 0.8rem;
		color: #666;
	}

	.no-channels {
		width: 100%;
		text-align: center;
		padding: 1rem;
		color: #999;
		font-size: 0.8rem;
	}

	
	::v-deep .up-radio {
		display: flex;
		align-items: center;
		width: 100%;
		padding: 0.5rem;
		border: 1px solid #eee;
		border-radius: 8px;
		transition: all 0.3s;
		font-size: 10px !important;
	}

	::v-deep .up-radio__checked {
		border-color: rgb(47, 122, 218);
		background-color: rgba(47, 122, 218, 0.05);

		font-size: 10px !important;
	}

	::v-deep .up-radio__icon-wrap {
		margin-right: 0.5rem;
		font-size: 10px !important;
	}

	.btns {
		width: 60vw;
		border-radius: 10vw;
		text-align: center;
		background: linear-gradient(to right, rgb(104, 175, 247), rgb(47, 122, 218));
		
		font-weight: bold;
		font-size: 1rem;
		padding: 0.4rem 1rem;
		cursor: pointer;
		color: #fff;
	}

	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 50vh;
		text-align: center;
		padding: 0 30px;
	}

	.empty-icon {
		width: 120px;
		height: 120px;
		margin-bottom: 20px;
		opacity: 0.7;
	}

	.empty-text {
		font-size: 18px;
		font-weight: 500;
		color: #333;
		margin-bottom: 10px;
	}

	.empty-subtext {
		font-size: 14px;
		color: #666;
		line-height: 1.5;
	}

	
	.card-exchange-rate {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		padding: 8px 12px;
		border-radius: 12px;
		
		text-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
		animation: rateAnimation 2s infinite alternate ease-in-out;
	}

	.rate-value {
		font-size: 18px;
		font-weight: bold;
		color: #ffffff;
		letter-spacing: 0.5px;
	}

	.rate-label {
		font-size: 12px;
		margin-top: 2px;
		opacity: 0.9;
		color: #ffffff;
	}

	
	@keyframes rateAnimation {
		0% {
			transform: translateY(-50%) scale(1);
			text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
		}

		100% {
			transform: translateY(-50%) scale(1.05);
			text-shadow: 0 0 15px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
		}
	}

	.rate-value {
		font-size: 16px;
		font-weight: bold;
	}

	.rate-label {
		font-size: 12px;
		margin-top: 2px;
		opacity: 0.8;
	}

	
	.bank-info,
	.card-number {
		width: calc(100% - 100px);
	}
</style>